<template>
	<div class="login-container">
		<div class="login-left-logo-text">
			<span>{{ getThemeConfig.globalViceTitle }}</span>
		</div>
		<div class="login-right-warp flex-margin">
			<div class="login-right-warp-mian">
				<div class="login-right-warp-main-form">
					<div class="login-right-select">
						<div 
							@click="handleLoginTypeChange('admin')"
							:class="{ 'login-type-active': currentLoginType === 'admin' }"
						>
							管理员登录
						</div>
						<div 
							@click="handleLoginTypeChange('staff')"
							:class="{ 'login-type-active': currentLoginType === 'staff' }"
						>
							员工登录
						</div>
					</div>
					<div class="login-right-input">
						<!-- 使用同一个样式容器包裹不同登录组件 -->
						<div class="login-input-container">
							<Account v-if="currentLoginType === 'admin'" />
							<Account v-if="currentLoginType === 'staff'" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
const Mobile = defineAsyncComponent(() => import('/@/views/login/component/mobile.vue'));
const Scan = defineAsyncComponent(() => import('/@/views/login/component/scan.vue'));

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

// 登录类型状态管理：admin-管理员登录，staff-员工登录
const currentLoginType = ref<'admin' | 'staff'>('admin');

// 切换登录类型 - 简化逻辑，直接切换无动画
const handleLoginTypeChange = (type: 'admin' | 'staff') => {
	currentLoginType.value = type;
};

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	height: 100%;
	background-image: url('../../assets/bgc.3dc3b233.png');
	background-size: 100% 100%;
	
	.login-left-logo-text {
		width: 100%;
		height: 200px;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		span {
			margin-top: 6%;
			margin-left: 10px;
			font-size: 32px;
			color: #ffffff;
			font-weight: 700;
			text-shadow: 8px 4px 4px rgba(0, 0, 0, .6);
		}
	}
	
	.login-right-warp {
		width: 500px;
		height: 380px;
		position: relative;
		overflow: hidden;
		background-color: var(--el-color-white);
		border-radius: 8px;
		
		.login-right-select {
			width: 400px;
			height: 50px;
			display: flex;
			font-size:14px;
			border: 1px solid rgba(182, 181, 181, 0.49);
			div{
				width: 50%;
				display: flex;	
				justify-content: center;
				align-items: center;
				font-size: 16px;
				cursor: pointer;
			}
			/* 登录类型激活状态样式 */
			.login-type-active {
				border-bottom:none;
				color: #409EFF;
			}
		}
		
		.login-right-warp-mian {
			display: flex;
			flex-direction: column;
			height: 100%;
			
			.login-right-warp-main-form {
				flex: 1;
				padding: 0 50px 50px;
				margin-top: 10%;
			}
		}
		
		// 统一登录输入框容器样式
		.login-right-input {
			width: 100%;
			margin-top: 30px;
			
			.login-input-container {
				// 确保两个登录组件使用相同的基础样式
				width: 100%;
				
				// 统一输入框样式
				.el-input {
					width: 100%;
					margin-bottom: 20px;
				}
				
				// 统一标签文字样式
				label {
					display: block;
					margin-bottom: 8px;
					font-size: 14px;
					color: var(--el-text-color-primary);
				}
				
				// 统一按钮样式
				.el-button {
					width: 100%;
					height: 40px;
					font-size: 16px;
				}
			}
		}
	}
}
.login-right-select:hover{
	color:#409EFF;
	transition:all 500ms;
}
.bg_img {
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 0;
}
</style>
